<template>
  <div class="personal-center">
    <t-card title="个人中心" class="personal-center-card">
      <div v-if="adminUserInfo" class="personal-info">
        <img src="@/assets/证件头像.jpg" alt="头像" class="avatar" />
        <div class="info">
          <t-descriptions layout="vertical" colon :column="1" class="descriptions">
            <t-descriptions-item label="用户名">{{ adminUserInfo.username }}</t-descriptions-item>
            <t-descriptions-item label="姓名">{{ adminUserInfo.fullName }}</t-descriptions-item>
            <t-descriptions-item label="职位">{{ adminUserInfo.position }}</t-descriptions-item>
            <t-descriptions-item label="部门">{{ adminUserInfo.department }}</t-descriptions-item>
            <t-descriptions-item label="邮箱">{{ adminUserInfo.email }}</t-descriptions-item>
            <t-descriptions-item label="电话">{{ adminUserInfo.phone }}</t-descriptions-item>
          </t-descriptions>
        </div>
      </div>
      <div class="edit-button">
        <t-button theme="primary" @click="showDialog = true" class="blue-button">修改个人信息</t-button>
      </div>
    </t-card>

    <!-- 修改个人信息弹窗 -->
    <t-dialog v-model:visible="showDialog" header="修改个人信息" confirm-btn="保存" cancel-btn="取消" @confirm="handleSave" class="edit-dialog">
      <t-form :data="formData" ref="form" label-width="50px">
        <t-form-item label="职位" name="position">
          <t-input v-model="formData.position" />
        </t-form-item>
        <t-form-item label="部门" name="department">
          <t-input v-model="formData.department" />
        </t-form-item>
        <t-form-item label="邮箱" name="email">
          <t-input v-model="formData.email" />
        </t-form-item>
        <t-form-item label="电话" name="phone">
          <t-input v-model="formData.phone" />
        </t-form-item>
      </t-form>
    </t-dialog>

    <!-- 消息提示 -->
    <MessageAlert v-if="showAlert" :theme="alertTheme" :message="alertMessage" @close="showAlert = false" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { Card, Descriptions, DescriptionsItem, Button, Dialog, Form, FormItem, Input } from 'tdesign-vue-next';
import MessageAlert from '@/MessageAlert.vue';

const adminUserInfo = ref(null);
const showDialog = ref(false);
const formData = ref({
  position: '',
  department: '',
  email: '',
  phone: '',
});
const showAlert = ref(false);
const alertTheme = ref('success');
const alertMessage = ref('');

const fetchAdminUserInfo = async (username) => {
  try {
    const response = await axios.get(`http://localhost:8080/admin-users/username/${username}`);
    adminUserInfo.value = response.data;
    // 初始化formData
    Object.assign(formData.value, {
      position: adminUserInfo.value.position,
      department: adminUserInfo.value.department,
      email: adminUserInfo.value.email,
      phone: adminUserInfo.value.phone,
    });
  } catch (error) {
    console.error('Failed to fetch admin user info:', error);
  }
};

onMounted(() => {
  const adminUsername = localStorage.getItem('adminUsername'); // 从localStorage中获取用户名
  if (adminUsername) {
    fetchAdminUserInfo(adminUsername);
  }
});

const handleSave = async () => {
  try {
    const response = await axios.put('http://localhost:8080/admin-users/update', { ...adminUserInfo.value, ...formData.value });
    if (response.data.message === '更新成功') {
      Object.assign(adminUserInfo.value, formData.value);
      showDialog.value = false;
      alertTheme.value = 'success';
      alertMessage.value = '个人信息修改成功';
    } else {
      alertTheme.value = 'error';
      alertMessage.value = response.data.message || '个人信息修改失败';
    }
  } catch (error) {
    console.error('Failed to update admin user info:', error);
    alertTheme.value = 'error';
    alertMessage.value = '个人信息修改失败';
  }
  showAlert.value = true;
};
</script>

<style scoped>
.personal-center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100vh; /* 设置高度为视口高度 */
  background: url('@/assets/bg-1.jpg') no-repeat center center fixed; /* 添加背景图片 */
  background-size: cover; /* 确保背景图片覆盖整个容器 */
}

.personal-center-card {
  width: 600px;
  background-color: rgba(255, 255, 255, 0.8); /* 背景颜色带有透明度 */
  backdrop-filter: blur(10px); /* 添加模糊效果 */
}

.personal-info {
  display: flex;
  align-items: center; /* 确保头像和信息居中对齐 */
}

.avatar {
  width: 120px; /* 调整为二寸照片的大小 */
  height: 160px; /* 调整为二寸照片的大小 */
  margin: 20px 20px 0 0; /* 调整头像的边距，使其向下移动 */
  border-radius: 0; /* 确保头像是正方形 */
}

.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.descriptions {
  gap: 10px; /* 减少描述项之间的间距 */
}

.edit-button {
  text-align: center;
  margin-top: 20px;
}

.blue-button {
  background-color: #0760ff;
  color: white;
}

/* 修改个人信息弹窗样式 */
.edit-dialog .t-dialog__body {
  width: 400px; /* 设置弹窗的宽度 */
  max-width: 90vw; /* 确保弹窗在小屏幕上不会超出视口宽度 */
}

/* 保存按钮样式 */
.t-dialog__footer .t-button {
  background-color: #0760ff; /* 与修改按钮颜色相同 */
  color: white;
}
</style>
